<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>培训未通过</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" href="../../static/css/font.css" th:href="@{/css/font.css}">
	<link rel="stylesheet" href="../../static/css/xadmin.css" th:href="@{/css/xadmin.css}">
	<script src="../../static/lib/layui/layui.js" charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
	<script type="text/javascript" src="../../static/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
	<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<style type="text/css">
		#page {
			display: flex;
			justify-content: center;
		}
	</style>
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="./index.html">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
	   onclick="location.reload()" title="刷新">
		<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
	</a>
</div>
<div class="layui-fluid">
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md12">
			<div class="layui-card" style="display: flex;">
				<div class="layui-card-body" style="display: inline-block">
					<ul class="layui-nav layui-nav-tree" lay-filter="test" style="width: auto;" id="batch_list">
						<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
					</ul>
				</div>
				<div id="" style="width: 86%;margin-top: -14px">
					<div class="layui-card-body ">
						<table class="layui-table layui-form" id="training-table" lay-filter="training">
						</table>
						<script type="text/html" id="operation-bar">
							<button class="layui-btn layui-btn-xs  layui-btn-warm" lay-event="detail">
								<i class="layui-icon">&#xe62d;</i>查看
							</button>
						</script>
					</div>
				</div>

			</div>
		</div>
	</div>
</div>
</body>
<script th:inline="NONE">
	var checkedMember = [];

	layui.use(['laydate', 'form', 'table'],
			function () {
				var laydate = layui.laydate;
				var table = layui.table;

				//执行一个laydate实例
				laydate.render({
					elem: '#start' //指定元素
				});

				//执行一个laydate实例
				laydate.render({
					elem: '#end' //指定元素
				});

				$.ajax({
					url: "/v1/training/getAllTrainingBatch",
					type: "get",
					dataType: "json",
					data: {},
					success: function (data) {
						// console.log(data)
						var Arr = data.data;
						// layui.use('table',
						// 		function () {
						// 			var table = layui.table;
						// 			table.render({
						// 				elem: "#training-table"
						// 				, url: "/v1/training/trainingBatchRecordTrainingBatchIdByProcess?process=1&trainingBatchId="+Arr[0].id
						// 				, cols: [[
						// 					{checkbox: true, fixed: true}
						// 					, {field: 'name', title: '姓名', sort: true}
						// 					, {field: 'gender', title: '性别', sort: true}
						// 					, {field: 'idCardNum', title: '身份证'}
						// 					, {field: 'educationalLevel', title: '文化程度', sort: true}
						// 					, {field: 'nation', title: '民族'}
						// 					, {field: '', title: '操作', toolbar: "#operation-bar"}
						// 				]]
						// 				, id: 'testReload'
						// 				, page: true
						// 				, height: 600
						// 				, done: function (res, curr, count) {
						// 					// console.log(res.data)
						// 					table_data = res.data;
						// 				}
						// 			});
						// 		})
						var HtmlStr = '';
						for (var i = 0; i < Arr.length; i++) {
							HtmlStr += '<li class="layui-nav-item"  >' +
									'<a href="javascript:;" onclick="batchTableRender(\'' + Arr[i].id + '\');">' +
									'<i class="layui-icon layui-icon-file">' +
									'</i>' + Arr[i].batchName + '</a>' +
									'</li>'
						}
						var batch_list = $("#batch_list");
						batch_list.html(HtmlStr);
					}
				});


			});

	/*用户-删除*/
	function member_del(obj, id) {
		layer.confirm('确认要删除吗？',
				function (index) {
					//发异步删除数据
					$(obj).parents("tr").remove();
					layer.msg('已删除!', {
						icon: 1,
						time: 1000
					});
				});
	}

	function delAll(argument) {

		var data = tableCheck.getData();

		layer.confirm('确认要删除吗？' + data,
				function (index) {
					//捉到所有被选中的，发异步进行删除
					layer.msg('删除成功', {
						icon: 1
					});
					$(".layui-form-checked").not('.header').parents('tr').remove();
				});
	}

	function showWindow(path, title) {
		layer.open({
			type: 2,
			content: path,
			title: title,
			area: ["900px", $(window).height() + 'px'],
			offset: '0px',
			success: function (layero, index) {
				layer.iframeAuto(index)
			}
		})
	}

	// 渲染右侧的表格
	function batchTableRender(id) {
		layui.use(['laydate', 'form', 'table'],
				function () {
					var table = layui.table;
					table.render({
						elem: "#training-table"
						, url: "/v1/training/trainingBatchRecordTrainingBatchIdByProcess?process=1&trainingBatchId="+id
						, cols: [[
							{checkbox: true, fixed: true}
							, {field: 'name', title: '姓名', sort: true}
							, {field: 'gender', title: '性别', sort: true}
							, {field: 'idCardNum', title: '身份证'}
							, {field: 'educationalLevel', title: '文化程度', sort: true}
							, {field: 'nation', title: '民族'}
							, {field: '', title: '操作', toolbar: "#operation-bar"}
						]]
						, id: 'testReload'
						, page: true
						, height: 600
						, done: function (res, curr, count) {
							// console.log(res.data)
							table_data = res.data;
						}
					});

					//工具条
					table.on('tool(training)', function (obj) {
						var data = obj.data;
						if (obj.event === 'detail') {
							layer.msg('ID：' + data.id + ' 的查看操作');
							showWindow('check-member.html?id='+ data.id, '查看')
						}
					});

					//表格复选框选择
					table.on('checkbox(training)', function (obj) {
						if (obj.checked == true) {
							if (obj.type === 'one') {
								// console.log(obj.data);
								checkedMember.push(obj.data.id);
							} else {
								for (var item of table_data) {
									checkedMember.push(item.id);
								}
							}
						} else {
							if (obj.type === 'one') {
								for (var i = 0; i < checkedMember.length; i++) {
									if (checkedMember[i] === obj.data.id) {
										checkedMember.splice(i, 1);
									}
								}
							} else {
								for (var i = 0; i < checkedMember.length; i++) {
									for (var j = 0; j < table_data.length; j++) {
										if (checkedMember[i] === table_data[j].id) {
											checkedMember.splice(i, 1);
										}
									}
								}
							}
						}
						// console.log(checkedMember);
					});
				})
	}

</script>
</html>